<template>
  <!-- 有子节点 -->
  <el-sub-menu v-if="item.children && item.children.length" :index="String(item.id)" @mouseenter="hover = true"
    @mouseleave="hover = false">
    <template #title>
      <div class="menu-label">
        <el-image :src="defaultFolder" fit="cover" class="folder-icon" />
        <span class="menu-text">
          <div style="display: flex;align-items: center;">
            {{ item.name }}
            <img src="https://image.lutongjiakao.com/system/5707eab8fee2418f89f4aecbf9466d5e.png" alt=""
              class="vip_icon" v-if="item.isPay === 1">
            <!-- <span class="menu-state"> -->
            <img
              :src="item.status === 0 ? 'https://image.lutongjiakao.com/system/3497607f38ab45fca909adf618f05f65.png' : 'https://image.lutongjiakao.com/system/e27e048440824ab9afe66d8736838f7f.png'"
              alt="" class="vip_icon">
            <!-- </span> -->
            <!-- <span class="menu-state">{{ item.status === 0 ? '停用' : '启用' }}</span> -->
          </div>
        </span>

        <span class="opera-wrap" v-if="hover">
          <!-- <i class="iconfont-sys opera-icon" v-if="isAdd" @click.stop="handleAdd(item)">&#xe602;</i> -->
          <i class="iconfont-sys opera-icon edit-icon" @click.stop="handleEdit(item)">&#xe706;</i>
          <i class="iconfont-sys opera-icon " @click.stop="handleCopy(item)">&#xe624;</i>
          <!-- <i class="iconfont-sys opera-icon del-icon" @click.stop="handleDelete(item)">&#xe850;</i> -->
        </span>

        <span v-if="!hover && item.children.length === 0" class="tag">
          {{ item.questionCount }}
        </span>
      </div>
    </template>

    <MenuItem v-for="child in item.children" :key="child.id" :item="child" @add="handleAdd" @edit="handleEdit"
      @delete="handleDelete" @copy="handleCopy" />
  </el-sub-menu>

  <!-- 无子节点 -->
  <el-menu-item v-else :index="String(item.id)" @mouseenter="hover = true" @mouseleave="hover = false">
    <div class="menu-label">
      <el-image :src="defaultFolder" fit="cover" class="folder-icon" />
      <span class="menu-text" v-if="item.pageUrlType !== '04'">
        <div style="display: flex;align-items: center;">
          {{ item.name }}
          <img src="https://image.lutongjiakao.com/system/5707eab8fee2418f89f4aecbf9466d5e.png" alt="" class="vip_icon"
            v-if="item.isPay === 1">
          <!-- :style="{ color: item.status === 0 ? '' : '#67c23a' }" -->
          <!-- <span class="menu-state"> -->
          <!-- {{ item.status === 0 ? '停用' :
              '启用'
            }} -->
          <img
            :src="item.status === 0 ? 'https://image.lutongjiakao.com/system/3497607f38ab45fca909adf618f05f65.png' : 'https://image.lutongjiakao.com/system/e27e048440824ab9afe66d8736838f7f.png'"
            alt="" class="vip_icon">
          <!-- </span> -->
        </div>
      </span>
      <span class="menu-text" v-else v-html="getHighlightedText(item)"></span>

      <span class="opera-wrap" v-if="hover">
        <!-- <i class="iconfont-sys opera-icon" v-if="isAdd" @click.stop="handleAdd(item)">&#xe602;</i> -->
        <i class="iconfont-sys opera-icon edit-icon" @click.stop="handleEdit(item)">&#xe706;</i>
        <i class="iconfont-sys opera-icon del-icon" @click.stop="handleDelete(item)">&#xe850;</i>
        <!-- copy-icon -->
        <i class="iconfont-sys opera-icon " @click.stop="handleCopy(item)">&#xe624;</i>
      </span>

      <span v-if="!hover && item.children.length === 0" class="tag">
        {{ item.questionCount }}
      </span>
    </div>
    <!-- <div v-for="(ele, i) in item.carModelList" :key="i">
      {{ ele.carName }}
    </div> -->
  </el-menu-item>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import defaultFolder from '@/assets/img/folder.png'

const props = defineProps({
  item: { type: Object, required: true },
  questionType: { type: String }
})

const isAdd = computed(() => ['08'].includes(props.questionType as string))

const emit = defineEmits(['add', 'edit', 'delete', 'copy', 'copyChild'])
const hover = ref(false)

function getHighlightedText(item: any) {
  let { label, name, isPay, status } = item
  if (!label || !name) return name

  // 分割关键词
  const keywords = label
    .split(',')
    .map((word: any) => word.trim())
    .filter(Boolean)

  // 构建关键词高亮正则
  const pattern = new RegExp(`(${keywords.join('|')})`, 'g')

  // 替换为高亮 HTML
  let highlighted = name.replace(pattern, '<span style="color: red;">$1</span>')

  // 根据条件拼接图标
  let iconsHTML = ''
  if (isPay === 1) {
    iconsHTML += `<img src="https://image.lutongjiakao.com/system/5707eab8fee2418f89f4aecbf9466d5e.png" alt="" class="vip_icon" style="vertical-align:middle;">`
  }
  iconsHTML += `<img src="${status === 0 ? 'https://image.lutongjiakao.com/system/3497607f38ab45fca909adf618f05f65.png' : 'https://image.lutongjiakao.com/system/e27e048440824ab9afe66d8736838f7f.png'}" alt="" class="vip_icon" style="vertical-align:middle;">`

  return `<span style="display:flex;align-items:center;gap:4px;">${highlighted}${iconsHTML}</span>`
}


function handleAdd(item: any) {
  emit('add', item)
}
function handleEdit(item: any) {
  console.log(item, "item==");

  emit('edit', item)
}
function handleDelete(item: any) {
  emit('delete', item)
}
function handleCopy(item: any) {
  console.log(item, "item===");
  emit('copy', item)
}

// function hasParent(childId: string, parentId = null) {
//   for (const node of props.item) {
//     if (node.id === childId) {
//       return parentId !== null; // 如果有 parentId，返回 true；否则 false
//     }
//     if (node.children && node.children.length > 0) {
//       const found = hasParent(node.children, childId, node.id);
//       if (found !== false) return found;
//     }
//   }
//   return false;
// }
</script>

<style scoped lang="scss">
.el-menu-item.is-active,
.el-sub-menu.is-active>.el-sub-menu__title {
  background-color: #f0f9eb;
  border-right: 3px solid #67c23a;
  color: #67c23a;
  font-weight: 500;
  width: 100%;
  // box-sizing: border-box;
  padding: 0;
}

.el-menu-item.is-active .menu-text,
.el-sub-menu.is-active>.el-sub-menu__title .menu-text {
  color: #67c23a;
}

.el-menu-item.is-active .tag,
.el-sub-menu.is-active>.el-sub-menu__title .tag {
  background-color: transparent;
  color: #909399;
  border: none;
}

.el-menu-item,
.el-sub-menu {
  padding: 0;
}

.menu-label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: background 0.3s;
  overflow: hidden;
}

.folder-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.menu-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-state {
  font-size: 10px;
}

.tag {
  margin-left: auto;
  margin-right: 4px;
}

.opera-wrap {
  display: none;
  gap: 6px;
  margin-left: 10px;
  margin-right: 16px;
  flex-shrink: 0;

  .edit-icon {
    color: var(--el-color-primary);
  }

  .del-icon {
    color: #f34965;
  }

  .copy-icon {
    color: #ccc;
  }
}

.menu-label:hover .opera-wrap {
  display: flex;
}

.opera-icon {
  font-size: 14px;
  color: #666;
  cursor: pointer;

  &:hover {
    color: var(--el-color-primary);
  }
}

.vip_icon {
  width: 15px;
  height: 15px;
  margin-left: 5px;
}

.menu-text :deep(.vip_icon) {
  width: 15px;
  height: 15px;
  margin-left: 5px;
}
</style>
